<!DOCTYPE html>
<html lang="en">


<style>
.profile-info-name {
	text-align: right;
	padding: 6px 10px 6px 4px;
	font-weight: 400;
	color: #667E99;
	background-color: transparent;
	width: 150px;
	vertical-align: middle
}
.profile-info-name2 {
	text-align: right;
	padding: 6px 10px 6px 4px;
	font-weight: 400;
	color: #667E99;
	background-color: #EDF3F4;
	width: 100px;
	vertical-align: middle
}

.search-media {
	border: 1px solid #ddd;
	margin-top: -1px;
	padding: 12px 12px 12px 12px;
	-webkit-transition: border .1s ease-in-out 0s;
	-o-transition: border .1s ease-in-out 0s;
	transition: border .1s ease-in-out 0s;
	position: relative
}
@media (min-width: 992px){
	.modal-lg {
		width: 1100px!important;
	}
}
@media (min-width: 992px){
	.modal-lg {
		width: 1100px!important;
	}
}
@media (min-width: 768px){
	.modal-dialog {
		width: 1100px!important;
	}
}
.fl-r-table {
	float: right!important;
	width: calc(100% - 125px)!important;
}
.search-media .user-photo {
	float: left;
	display: block;
	width: 113px;
	height: 129px;
}
#faq-tab-2 .search-media {
	margin-bottom: 15px;
}
.modal-content {
	height: 700px!important;
}
#faq-tab-2 {
	height: 530px;
	overflow: auto;
}
</style>

<body class="no-skin">

<div class="main-container ace-save-state" id="main-container">

    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <!-- 
				<div class="page-header">
					
				</div>--><!-- /.page-header -->
				<div  class="hidden">
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-villageId" placeholder="villageId" value="$!{familyInfo.villageId}" />
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-familyId" placeholder="familyId" value="$!{familyInfo.familyId}" />
				</div>
				
				<div class="row">
					<div class="col-sm-12">
						<div class="profile-activity clearfix" id="pkh_detail_title_id">
							<!--<img class="pull-left" alt="Alex Doe's avatar" src="assets/images/avatars/avatar5.png" />-->
							<span class="label label-info size-18-name">户主姓名： </span>
							<strong class="hz-name">$!{familyInfo.personName}</strong>
							<span class="label label-info size-18-name">贫困属性： </span>
							<strong class="hz-name">$!{familyInfo.povertyAttrName}</strong>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">						
						
						<div class="col-xs-12">
						
							
							
							
							
							
						
						
						</div>
						
						
					</div>
				</div>
													
				
				<div class="hr hr4 hr-dotted"></div>
				
				
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="tabbable">
							<ul class="nav nav-tabs padding-18 tab-size-bigger" id="myTab">
								<li class="active">
									<a data-toggle="tab" href="#faq-tab-1" class="tab-title">
										基本信息
									</a>
								</li>

								<li>
									<a data-toggle="tab" href="#faq-tab-2" class="tab-title">
										家庭信息
									</a>
								</li>

								<li>
									<a data-toggle="tab" href="#faq-tab-3" class="tab-title">
										帮扶记录
									</a>
								</li>
								
								<li>
									<a data-toggle="tab" href="#faq-tab-4" class="tab-title">
										脱贫项目
									</a>
								</li>
								
								<li>
									<a data-toggle="tab" href="#faq-tab-5" class="tab-title">
										收入情况
									</a>
								</li>

								
							</ul>

							<div class="tab-content no-border padding-6" id="family_rel_tab">
								

								<div id="faq-tab-1" class="tab-pane fade in active">
								
								
									<div class="profile-user-info profile-user-info-striped" style="width: calc(100% );" id="village_info_div" >
										<div class="profile-info-row">
											<div class="profile-info-name"> 户主姓名 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.personName}</span>
											</div>
											<div class="profile-info-name"> 家庭人口 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.totalMember}</span>
											</div>
											<div class="profile-info-name"> 联系电话 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.personTel}</span>
											</div>
										</div>
										<div class="profile-info-row">
											<div class="profile-info-name"> 家庭住址 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.adress}</span>
											</div>
											<div class="profile-info-name"> 识别标准 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.identStandardName}</span>
											</div>
											<div class="profile-info-name"> 贫困户属性 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.povertyAttrName}</span>
											</div>
										</div>
										<div class="profile-info-row">
											<div class="profile-info-name"> 是否解决温饱 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.isFoodClothingName}</span>
											</div>
											<div class="profile-info-name"> 是否贫困辍学 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.isDropOutName}</span>
											</div>
											<div class="profile-info-name"> 是否危房 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.isDangerousName}</span>
											</div>
										</div>
										<div class="profile-info-row">
											<div class="profile-info-name"> 是否参加新农合 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.isNrcmsName}</span>
											</div>
											<div class="profile-info-name" style="width:150"> 是否参加养老保险 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.isEndowmentName}</span>
											</div>
											<div class="profile-info-name"> 主要致贫原因 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.mainReasonName}</span>
											</div>
										</div>
										<div class="profile-info-row">
											<div class="profile-info-name"> 其他致贫原因 </div>

											<div class="profile-info-value">
												<span class="editable" > $!{familyInfo.otherReasonName} </span>
											</div>
											<div class="profile-info-name"> 致贫原因说明 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.reason}</span>
											</div>
											<div class="profile-info-name"> 计划脱贫年度 </div>

											<div class="profile-info-value">
												<span class="editable" > $!{planShakeOffDate}</span>
											</div>
										</div>
										<div class="profile-info-row">
											<div class="profile-info-name"> 脱贫状态 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.povertyStateName}</span>
											</div>
											<div class="profile-info-name">  </div>

											<div class="profile-info-value">
												<span class="editable" > </span>
											</div>
											<div class="profile-info-name">  </div>

											<div class="profile-info-value">
												<span class="editable" > </span>
											</div>
										</div>
										
										<div class="profile-info-row">
											<div class="profile-info-name"> 帮扶人姓名 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.aidStaffName}</span>
											</div>
											<div class="profile-info-name"> 帮扶人职务 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.aidStaffJobTitle}</span>
											</div>
											<div class="profile-info-name"> 帮扶人联系电话 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.aidStaffTel}</span>
											</div>
										</div>
										<div class="profile-info-row">
											<div class="profile-info-name"> 帮扶人办公电话 </div>

											<div class="profile-info-value">
												<span class="editable" >$!{familyInfo.aidStaffOfficeTel}</span>
											</div>
											<div class="profile-info-name">  </div>

											<div class="profile-info-value">
												<span class="editable" ></span>
											</div>
											<div class="profile-info-name">  </div>

											<div class="profile-info-value">
												<span class="editable" ></span>
											</div>
										</div>
									</div>
									
									

								
									
									
								</div>

								<div id="faq-tab-2" class="tab-pane fade">
									#foreach($familyMemberPO in $familyMemberList)
									<div class="media search-media">
										<img class="user-photo" src="$!{familyMemberPO.personPhoto}" alt="$!{familyMemberPO.personName}">
										<div class="profile-user-info profile-user-info-striped fl-r-table">
											<div class="profile-info-row">
												<div class="profile-info-name"> 户主姓名 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.personName}</span>
												</div>
												<div class="profile-info-name"> 与户主关系 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.masterRelName}</span>
												</div>
												<div class="profile-info-name"> 劳动技能 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.workSkillName}</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name"> 性别 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.genderName}</span>
												</div>
												<div class="profile-info-name"> 文化程度 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.educationLevelName}</span>
												</div>
												<div class="profile-info-name"> 务工情况 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.workStateName}</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name"> 身份证号 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.idNumber}</span>
												</div>
												<div class="profile-info-name"> 在校生情况 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.studentStateName}</span>
												</div>
												<div class="profile-info-name"> 是否现役军人 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.isArmyName}</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name"> 健康情况 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.healthStateName}</span>
												</div>
												<div class="profile-info-name"> 是否参加大病保险 </div>
												<div class="profile-info-value">
													<span class="editable">$!{familyMemberPO.isInsuranceName}</span>
												</div>
											</div>
										</div>
									</div>
									#end
								
									
								</div>
								
								
								
								
								
								<div id="faq-tab-3" class="tab-pane fade">
									<!--
									<h4 class="blue">
										<i class="orange ace-icon fa fa-credit-card bigger-110"></i>
										帮扶记录
									</h4>
									-->
									<div class="col-sm-12">
										<table id="zfrz-list-detail"></table>
										<div id="zfrz-list-detail-pager"></div>
									</div>
								</div>

								<div id="faq-tab-4" class="tab-pane fade">
									<!--
									<h4 class="blue">
										<i class="purple ace-icon fa fa-magic bigger-110"></i>
										帮扶记录
									</h4>
									-->
									<div class="col-sm-12">
										<table id="bfjl-list-detail"></table>
										<div id="bfjl-list-detail-pager"></div>
									</div>
									
								</div>
								<div id="faq-tab-5" class="tab-pane fade">
									<!--
									<h4 class="blue">
										<i class="purple ace-icon fa fa-magic bigger-110"></i>
										收入情况
									</h4>
									-->
									<div class="col-sm-12">
										<table id="srqk-list"></table>
										<div id="srqk-list-pager"></div>
									</div>
									
								</div>
							</div>
						</div>

						<!-- PAGE CONTENT ENDS -->
					</div><!-- /.col -->
				</div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div>
</div>


		<!-- 帮扶日志 -->
		<script type="text/javascript">
			var family_rel_tab = $("#family_rel_tab");
			//resize to fit page size
			$(window).on('resize.jqGrid', function () {
				$("#zfrz-list-detail").jqGrid( 'setGridWidth', family_rel_tab.width()-10 );
		    });
			function detailClick_zfrz(rowid){
				console.log("zfrz rowid="+rowid);
			};
			$("#zfrz-list-detail").jqGrid({
						url : '$!webPath/fpgzvillage/qryFamilyVisitedLog?villageId='+$("#form-field-villageId").val()+'&familyId='+$("#form-field-familyId").val(),
						datatype : "json",
						mtype : 'POST',
						height : 370,
						autowidth: true,
						colNames : [ '日期', '帮扶内容', '乡镇','村', '帮扶照片'],
						colModel : [ 
							//{name : 'xh',index : 'xh',width : 50}, 
							{name : 'visitedDate',index : 'visitedDate',width : 100,sortable : false,
								formatter: function (cellvalue, options, rowObject) {
									
									return cellvalue.slice(0,10);
								}
							},
							{name : 'content',index : 'content',sortable : false},
							{name : 'townName',index : 'townName',width : 100,sortable : false},
							{name : 'villageName',index : 'villageName',width : 100,sortable : false},
							{name : 'photoList',index : 'photoList', editable: false, 
								formatter: function (cellvalue, options, rowObject) {

									if(cellvalue !== null && cellvalue !== undefined && cellvalue !== ''){
									
										var imgPathAry = cellvalue.split(',');
										var detail = '';
										for(var imgPath in imgPathAry){
											//console.log(imgPathAry[imgPath]);
											detail += '<img src="'+ imgPathAry[imgPath] +'" style="width:50px;height:50px;" />';
										}
										return detail;
									}
									return '';
								} 
							}
							/**
							{name : 'myac',index : '', width:80, fixed:true, sortable:false, resize:false,
//								formatter:'actions', 
								formatter: function (cellvalue, options, rowObject) {
					
									var detail='<div style="cursor: pointer;">';
									detail += '<i class="normal-icon ace-icon fa fa-eye blue " onclick="detailClick_zfrz(' + options.rowId +')">详细</i>';
									detail += '</div>';
									return detail;
								}
								
							}**/
						],
						rowNum:20,
						rowList:[10,20,30],
						jsonReader : {
							root : "resultList",
							page : "page",
							total : "totalPages",
							records : "totalRecords",
							rows : "resultList"
						},
						pager: '#zfrz-list-detail-pager',
						sortname : 'xh',
						viewrecords : true,
						sortorder : "desc",
						loadComplete : function() {
							var table = this;
							setTimeout(function(){
								styleCheckbox(table);
								
								updateActionIcons(table);
								updatePagerIcons(table);
								enableTooltips(table);
							}, 0);
							
							//console.log("#zfrz-list-detail");
							$(table).siblings(".norecords").remove(); 
							var rowNum = parseInt($(table).getGridParam("records"), 10);   
						    if (rowNum <= 0) {   
								$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
								$(table).siblings(".norecords").show(); 								
						    }
						},

						multiselect : false
				});
				$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
				
		</script>

		
		<!-- 脱贫项目 -->
		<script type="text/javascript">
		function detailClick_bfjl(rowid){
			console.log("bfjl rowid="+rowid);
		};
		jQuery(function($) {
			var family_rel_tab = $("#family_rel_tab");
			//resize to fit page size
			$(window).on('resize.jqGrid', function () {
				$("#bfjl-list-detail").jqGrid( 'setGridWidth', family_rel_tab.width()-10 );
		    });
			
			$("#bfjl-list-detail").jqGrid({
						url : '$!webPath/fpgzvillage/qryFamilyAidLog?villageId='+$("#form-field-villageId").val()+'&familyId='+$("#form-field-familyId").val(),
						datatype : "json",
						mtype : 'POST',
						height : 370,
						autowidth: true,
						colNames : [  '日期', '产业分类', '投入项目', '投入金额', '项目说明',' '],
						colModel : [ 
							//{name : 'xh',index : 'xh',width : 50}, 
							{name : 'aidDate',index : 'aidDate',width : 100,sortable : false,
								formatter: function (cellvalue, options, rowObject) {
									
									return cellvalue.slice(0,10);
								}
							},
							{name : 'projectTypeName',index : 'projectTypeName',width : 100,sortable : false},
							{name : 'projectName',index : 'projectName',width : 100,sortable : false},
							{name : 'aidAmount',index : 'aidAmount',width : 100,sortable : false},
							{name : 'projectDesc',index : 'projectDesc',sortable : false},
							{name : 'photoList',index : 'photoList', editable: false, 
								formatter: function (cellvalue, options, rowObject) {

									if(cellvalue !== null && cellvalue !== undefined && cellvalue !== ''){
									
										var imgPathAry = cellvalue.split(',');
										var detail = '';
										for(var imgPath in imgPathAry){
											//console.log(imgPathAry[imgPath]);
											detail += '<img src="'+ imgPathAry[imgPath] +'" style="width:50px;height:50px;" />';
										}
										return detail;
									}
									return '';
								} 
							}
							/**
							{name : 'myac',index : '', width:80, fixed:true, sortable:false, resize:false,
//								formatter:'actions', 
								formatter: function (cellvalue, options, rowObject) {
					
									var detail='<div style="cursor: pointer;">';
									detail += '<i class="normal-icon ace-icon fa fa-eye blue " onclick="detailClick_bfjl(' + options.rowId +')">详细</i>';
									detail += '</div>';
									return detail;
								}
								
							}**/
							
						],
						rowNum:20,
						rowList:[10,20,30],
						jsonReader : {
							root : "resultList",
							page : "page",
							total : "totalPages",
							records : "totalRecords",
							rows : "resultList"
						},
						pager: '#bfjl-list-detail-pager',
						sortname : 'xh',
						viewrecords : true,
						altRows: true,
						sortorder : "desc",
						loadComplete : function() {
							var table = this;
							setTimeout(function(){
								styleCheckbox(table);
								
								updateActionIcons(table);
								updatePagerIcons(table);
								enableTooltips(table);
							}, 0);
							
							$(table).siblings(".norecords").remove(); 
							var rowNum = parseInt($(table).getGridParam("records"), 10);   
						    if (rowNum <= 0) {   
								$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
								$(table).siblings(".norecords").show(); 								
						    }
						},
						multiselect : false
			});
			$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
			
			
			
			
		});
		</script>

		<!-- 收入情况 -->
		<script type="text/javascript">
		
		jQuery(function($) {
			var family_rel_tab = $("#family_rel_tab");
			//resize to fit page size
			$(window).on('resize.jqGrid', function () {
				$("#srqk-list").jqGrid( 'setGridWidth', family_rel_tab.width()-10 );
		    });
			
			$("#srqk-list").jqGrid({
						url : '$!webPath/fpgzvillage/qryFamilyIncome?villageId='+$("#form-field-villageId").val()+'&familyId='+$("#form-field-familyId").val(),
						datatype : "json",
						mtype : 'POST',
						height : 370,
						shrinkToFit:false,  
						autoScroll: true, 
						//autowidth: true,
						//colNames : [  '统计年份', '统计季度', '总收入', '人均收入', '工资收入','生产经营收入','财产收入','转移收入','政策性生活补贴','社会救助或补贴','报销医疗费','养老保险','生态补偿','其他转移','生产经营性支出','医疗支出','财产性支出','其他转移性支出'],
						colNames : [  '统计年份', '统计季度', '总收入', '人均收入', '工资收入','生产经营收入','财产收入','政策性生活补贴','社会救助或补贴','生产经营性支出','医疗支出','财产性支出'],
						colModel : [ 

							{name : 'statDate',index : 'statDate',width:95,sortable : false,
								formatter: function (cellvalue, options, rowObject) {
									
									return cellvalue.slice(0,4);
								}
							},
							{name : 'statQuarterName',index : 'statQuarterName',width:95,sortable : false},
							{name : 'allAmount',index : 'allAmount',width:95,sortable : false},
							{name : 'avgAmount',index : 'avgAmount',width:95,sortable : false},
							{name : 'workAmount',index : 'workAmount',width:95,sortable : false},
							{name : 'econAmount',index : 'econAmount',width:95,sortable : false},
							{name : 'propertyAmount',index : 'propertyAmount',width:95,sortable : false},
							
							//{name : 'transferAmount',index : 'transferAmount',width:95,sortable : false},
							{name : 'subsidyAmount',index : 'subsidyAmount',width:95,sortable : false},
							{name : 'aidAmount',index : 'aidAmount',width:95,sortable : false},
							//{name : 'expenseAmount',index : 'expenseAmount',width:95,sortable : false},
							//{name : 'endowmentAmount',index : 'endowmentAmount',width:95,sortable : false},
							//{name : 'ecologicalAmount',index : 'ecologicalAmount',width:95,sortable : false},
							//{name : 'otherTransfer',index : 'otherTransfer',width:95,sortable : false},
							{name : 'econPayout',index : 'econPayout',width:95,sortable : false},
							{name : 'medicalPayout',index : 'medicalPayout',width:95,sortable : false},
							{name : 'propertyPayout',index : 'propertyPayout',width:95,sortable : false}
							//{name : 'otherPayout',index : 'otherPayout',width:95,sortable : false}
						],
						rowNum:20,
						rowList:[10,20,30],
						jsonReader : {
							root : "resultList",
							page : "page",
							total : "totalPages",
							records : "totalRecords",
							rows : "resultList"
						},
						pager: '#srqk-list-pager',
						sortname : 'xh',
						viewrecords : true,
						altRows: true,
						sortorder : "desc",
						loadComplete : function() {
							var table = this;
							setTimeout(function(){
								styleCheckbox(table);
								
								updateActionIcons(table);
								updatePagerIcons(table);
								enableTooltips(table);
							}, 0);
							
							$(table).siblings(".norecords").remove(); 
							var rowNum = parseInt($(table).getGridParam("records"), 10);   
						    if (rowNum <= 0) {   
								$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
								$(table).siblings(".norecords").show(); 								
						    }
						},
						multiselect : false
			});
			$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
			
			$("#srqk-list").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
			
			
		});
		</script>

</body>
</html>
